<template>
  <view class="wrap">
    <!-- 注册表单 -->
    <u-form
      :model="registerForm"
      ref="registerFormRef"
      :error-type="['message']"
      class="registerForm"
    >
      <u-form-item label="用户名" prop="username" label-width="150rpx">
        <u-input v-model="registerForm.username" placeholder="请输入用户名" />
      </u-form-item>
      <u-form-item label="密码" prop="password" label-width="150rpx">
        <u-input
          type="password"
          v-model="registerForm.password"
          placeholder="请输入密码"
        />
      </u-form-item>
      <u-form-item label="昵称" prop="nickname" label-width="150rpx">
        <u-input
          type="text"
          v-model="registerForm.nickname"
          placeholder="请输入昵称"
        />
      </u-form-item>
      <u-form-item label="手机号" prop="phone" label-width="150rpx">
        <u-input
          type="digit"
          v-model="registerForm.phone"
          placeholder="请输入手机号"
        />
      </u-form-item>
      <u-form-item label="邮箱" prop="email" label-width="150rpx">
        <u-input
          type="text"
          v-model="registerForm.email"
          placeholder="请输入邮箱"
        />
      </u-form-item>
      <u-form-item label="头像" prop="avatar" label-width="150rpx">
        <u-upload
          :action="action"
          :max-size="5 * 1024 * 1024"
          max-count="1"
          @on-success="avatarUpload"
        ></u-upload>
      </u-form-item>
      <u-button type="success" shape="square" @click="submit">注册</u-button>
    </u-form>
    <!-- 显示toast提示 -->
    <u-toast ref="registerToastRef" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      registerForm: {
        username: "",
        password: "",
        nickname: "",
        phone: "",
        email: "",
        avatar: "",
      },
      registerFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 15,
            message: "用户名必须在5-15位之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 18,
            message: "密码必须在3-18位之间",
            trigger: "blur",
          },
        ],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { len: 11, message: "手机号必须为11位", trigger: "blur" },
          {
            pattern: /^\d*$/g,
            transform(value) {
              return String(value);
            },
            message: "手机号只能包含数字",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入合法邮箱格式", trigger: "blur" },
        ],
        avatar: [{ required: true, message: "请添加头像", trigger: "blur" }],
      },
      // 上传头像的接口
      action: "http://basketballManage.mooncode.cn/upload/",
    };
  },
  methods: {
    // 注册
    submit() {
      this.$refs.registerFormRef.validate(async (valid) => {
        if (valid) {
          const { data } = await this.$request({
            url: "/register",
            method: "post",
            data: this.registerForm,
          });
          if (data.code === 200) {
            return this.$refs.registerToastRef.show({
              title: data.message,
              type: "success",
              url: "pages/login/index",
            });
          } else {
            return this.$refs.registerToastRef.show({
              title: data.message,
              type: "error",
            });
          }
        }
      });
    },

    // 当上传头像后触发
    avatarUpload(data) {
      this.registerForm.avatar = data.object.avatarUrl;
    },

    onReady() {
      this.$refs.registerFormRef.setRules(this.registerFormRules);
    },
  },
};
</script>

<style scoped lang="scss">
  .wrap {
    padding: 30rpx 60rpx;
  }


</style>